<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>24°超市会员</title>
    <!--这里引入页面的样式-->
    <style>
        .cbody1{
            width: 60%;
            height: 100%;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-bottom: 10px;
            margin-left: 233px;
            margin-top: 70px;
            text-align: center;
        }
        .ch1{
            color: red;
            text-align: center;
        }
        .cspan{
            margin-top: 60px;
            font-size: 18px;
            text-align: center;
        }
    </style>
</head>
<!--引入相关的文件-->
<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js/axios-0.18.0.js"></script>
<body>
<div id="app">
    <el-page-header @back="goBack" content="24°会员">
    </el-page-header>
    <h1 class="ch1">欢迎您，尊贵的VIP会员！！！</h1>
    <div class="cspan">
    <span>会员编号：{{a.cardNumber}}</span>
    <span>&nbsp;&nbsp;&nbsp;&nbsp;余额：{{a.balance}}</span>
    <span>&nbsp;&nbsp;&nbsp;&nbsp;注册日期：{{a.registrationDate}}</span>
    </div>
    <div class="cbody1">
        <p>欢迎来到24°超市，尊敬的会员！在这里，您可以享受到更多的优惠和惊喜。我们一直致力于为广大会员提供最好的购物体验，让您感受到温馨、便捷、舒适的服务。

            作为24°超市的会员，您将拥有更多的权益和特权。另外，我们将不断推出更多的活动和福利，让您的购物更加实惠、惊喜和愉悦。

            我们真诚地感谢您对24°超市的信任和支持，希望我们能够一直为您提供优质、贴心的服务。祝您购物愉快，生活美满！</p>

    </div>
</div>


<script>
    const urlParams = new URLSearchParams(window.location.search);
    const uname=urlParams.get('userName');
    // 创建一个vue的实例对象,里面写那些数据和方法(一个是页面加载完后自动执行的方法，一个是其他操作后执行的代码)
    // 创建 Vue 实例
    new Vue({
        el: '#app',
        data() {
            return {
                value: new Date(),
                a:{}
            }
        },
        methods: {
            goBack() {
                console.log('go back');
                history.go(-1); // 返回上一个页面
            },
            showMemberInfo(){
                axios.get("../users?op=showMemberInfo&userName="+uname).then(response=>{
                    //console.log(response.data.data[0].userId+"++++++++++++++++++++++");
                   this.a= response.data.data[0]
                })
            }
        },
        mounted(){
            this.showMemberInfo();
        }
    });
</script>
</body>
</html>